<template>
  <div class="app-main-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/application/applicationCenter' }" :replace="true">{{ $t('message.yyzx') }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $t('message.dytg') }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs v-model="active" class="mt20" @tab-click="handleClick">
      <el-tab-pane :label="$t('message.spgl')" name="0">
        <QueryForm v-model="filters" :query-form-config="goodsFormConfig" @handleQuery="search" @clear="clear" />
        <div class="doumee-filter manufacturer">
          <div>
            <el-button type="primary" :loading="tbLoading" @click="tbBtn">{{ $t('message.tbsp') }}</el-button>
          </div>
        </div>
        <el-table ref="table" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit :header-row-class-name="'table-header'" class="doumee-element-tableb">
          <el-table-column align="center" :label="$t('message.dyspid')" prop="id" min-width="160" show-overflow-tooltip />
          <el-table-column align="center" :label="$t('message.dyspmc')" prop="proName" min-width="120" show-overflow-tooltip />
          <el-table-column align="center" :label="$t('message.dyspjg')" prop="price" min-width="100" show-overflow-tooltip />
          <el-table-column align="center" :label="$t('message.glcpmc')" prop="mealsName" min-width="200" show-overflow-tooltip />
          <el-table-column align="center" :label="$t('message.dhsl')" prop="convertNum" min-width="100" show-overflow-tooltip />
          <el-table-column align="center" :label="$t('message.kjlx')" prop="dealTypeName" min-width="120" show-overflow-tooltip />
          <el-table-column align="center" :label="$t('message.smzt')" prop="saleStatusName" min-width="100" fixed="right" show-overflow-tooltip />
          <el-table-column key="operate" :label="$t('message.caozuo')" align="center" width="100" fixed="right">
            <template slot-scope="scope">
              <div class="flex-cc">
                <el-button v-preventReClick type="text" @click="toEdit(scope.row)">{{ $t('message.pizhi') }}</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <Pagination :total="totalCount" :page="pagination.page" @current-change="getList" @SizeChange="handleSizeChange" />
      </el-tab-pane>
      <el-tab-pane :label="$t('message.yjjl')" name="2">
        <YjList v-if="active == '2'" />
      </el-tab-pane>
      <el-tab-pane :label="$t('message.glpz')" name="1">
        <Edit v-if="active == '1'" />
      </el-tab-pane>
    </el-tabs>
    <el-dialog :title="$t('message.bjsp')" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog" :visible.sync="dialogTableVisible" width="800px">
      <el-form ref="newDevice" class="doumee-form" :model="newDevice" :rules="rules" label-width="auto">
        <el-form-item :label="$t('message.kjlx')" prop="saleStatus">
          <el-select v-model="tglx" :placeholder="$t('message.qxz') + $t('message.kjlx')" disabled style="width: 100%">
            <el-option :label="$t('message.tgj')" :value="$t('message.tgj')" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.spmc')" prop="proName">
          <el-input v-model="newDevice.proName" class="input-style" maxlength="50" disabled :placeholder="$t('message.qsr') + $t('message.spmc')" />
        </el-form-item>
        <el-form-item :label="$t('message.smjg')" prop="price">
          <el-input v-model="newDevice.price" class="input-style" disabled maxlength="50" :placeholder="$t('message.qsr') + $t('message.smjg')" />
        </el-form-item>
        <el-form-item :label="$t('message.smzt')" prop="saleStatus">
          <el-select v-model="newDevice.saleStatus" :placeholder="$t('message.qxz') + $t('message.smzt')" disabled style="width: 100%">
            <el-option v-for="item in smlxList" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="业务类型" prop="proType">
          <el-select v-model="newDevice.proType" placeholder="请选择业务类型" style="width: 100%">
            <el-option v-for="item in businessType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <div :key="newDevice.proType">
          <el-form-item v-if="newDevice.proType=='04'" :label="$t('message.gltc')" prop="mealsId">
            <el-select v-model="newDevice.mealsId" :placeholder="$t('message.qxz') + $t('message.gltc')" style="width: 100%">
              <el-option v-for="item in saleTickets" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="newDevice.proType=='02'" label=" 关联门票" prop="mealsId">
            <el-select v-model="newDevice.mealsId" placeholder="请选择关联门票" style="width: 100%">
              <el-option v-for="item in voteTickets" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="核验方式" v-if="newDevice.proType=='02'&&newDevice.mealsId">
          <div v-for="item in voteTickets" :key="item.id">
            <span v-if="item.id == newDevice.mealsId">{{ item.checkTypeName }}</span>
          </div>
        </el-form-item>
        <el-form-item label="核验方式" v-if="newDevice.proType=='04'&&newDevice.mealsId">
          <div v-for="item in saleTickets" :key="item.id">
            <span v-if="item.id == newDevice.mealsId">{{ item.checkTypeName }}</span>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick :loading="saveLoading" type="primary" @click="save">{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { groupBuyConfigEdit, groupBuyConfigList, mtGetSession, mtProductDetail, mtSaleStatus, mealList, voteList } from '@/api'
import store from '@/store'
import { parseTime } from '@/utils'
import YjList from './yjList/index.vue'
import Edit from './edit/index.vue'
import { goodsFormConfig } from './config'
import Pagination from '@/components/paginations'
import QueryForm from '@/components/QueryForm'
export default {
  name: 'Tiktok',
  components: {
    YjList,
    Pagination,
    Edit,
    QueryForm
  },
  data () {
    return {
      modalDialog: store.getters.dialog,
      goodsFormConfig,
      meta: [],
      active: '0',
      dialogTableVisible: false,
      totalCount: 10,
      list: [],
      listLoading: false,
      saveLoading: false,
      tbLoading: false,
      splxList: [],
      smlxList: [],
      weekList: [{
        label: this.$t('message.z1'),
        value: '1'
      }, {
        label: this.$t('message.z2'),
        value: '2'
      }, {
        label: this.$t('message.z3'),
        value: '3'
      }, {
        label: this.$t('message.z4'),
        value: '4'
      }, {
        label: this.$t('message.z5'),
        value: '5'
      }, {
        label: this.$t('message.z6'),
        value: '6'
      }, {
        label: this.$t('message.z7'),
        value: '7'
      }, {
        label: this.$t('message.zjr'),
        value: '8'
      }],
      filters: {
        checkedStatus: null
      },
      tglx: this.$t('message.tgj'),
      newDevice: {
        rules: {}
      },
      param: {},
      pagination: {
        page: 1,
        rows: 10
      },
      rules: {
        appKey: [
          { required: true, message: this.$t('message.qsr') + 'app_key', trigger: 'blur' }
        ],
        appSecret: [
          { required: true, message: this.$t('message.qsr') + 'app_secre', trigger: 'blur' }
        ],
        openShopUuid: [
          { required: true, message: this.$t('message.qsr') + 'open_shop_uuid', trigger: 'blur' }
        ],
        storeName: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.dpmc'), trigger: 'blur' }
        ],
        'rules.groupByProType': [
          { required: true, message: this.$t('message.qxz') + this.$t('message.spfl'), trigger: 'change' }
        ],
        saleStatus: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.smzt'), trigger: 'change' }
        ],
        dealType: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.ywlb'), trigger: 'change' }
        ]
      },
      saleTickets: [],
      voteTickets: [],
      businessType: [
        {
          label: '门票',
          value: '02'
        },
        {
          label: '套餐',
          value: '04'
        }
      ]
    }
  },
  watch: {
    'newDevice.proType': function (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.newDevice.mealsId = null; // 或者其他适当的重置逻辑
      }
    }
  },
  created () {
    this.meta = this.$route.meta.buttons || []
    this.getLx()
    this.getList(1)
    if (this.$route.query.type) {
      this.active = '1'
    }
  },
  activated () {
    if (this.$route.query.type) {
      this.active = '1'
    }
  },
  mounted () {
    this.showSqy = false
  },
  methods: {
    changeProType () {
      // 先进行业务类型切换的相关逻辑，比如根据选择的业务类型获取不同的数据等
      this.newDevice.mealsId = null;
      // 强制组件更新
      this.$forceUpdate();
    },
    getLx () {
      const venueId = sessionStorage.getItem('venueId')
      mtSaleStatus({ param: { venueId } }).then(res => {
        if (res.errorCode === '000000') {
          this.smlxList = res.recordList
        }
      })
    },
    getMeals (items) {
      mealList({
        param: {
          venueId: sessionStorage.getItem('venueId')
        }
      })
        .then(res => {
          if (res.errorCode !== '000000') return
          this.saleTickets = res.recordList
          if (items.proType == '04') {
            const selectedTicket = this.saleTickets.find(item => item.id == items.mealsId);
            console.log(selectedTicket, 'this.newDevice.mealsId')
            if (selectedTicket) {
              this.newDevice.mealsId = selectedTicket.id;

            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 门票列表
    getVateList (items) {
      voteList({
        param: {
          venueId: sessionStorage.getItem('venueId')
        }
      })
        .then(res => {
          if (res.errorCode !== '000000') return
          this.voteTickets = res.recordList
          if (items.proType == '02') {
            const selectedTicket = this.voteTickets.find(item => item.id == items.mealsId);
            console.log(selectedTicket, 'this.newDevice.mealsId')
            if (selectedTicket) {
              this.newDevice.mealsId = selectedTicket.id;

            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleSizeChange (value) {
      this.pagination.rows = value
      this.getList(1)
    },
    handleClick (tab, event) {
      console.log(1, tab)
      if (this.active === '0') {
        this.getList(1)
      }
    },
    mtGetSession () {
      const venueId = sessionStorage.getItem('venueId')
      mtGetSession({ param: { venueId, authCode: this.auth_code } }).then(res => {
        if (res.errorCode === '000000') {
          this.getList(1)
        }
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    tbBtn () {
      this.tbLoading = true
      mtProductDetail({ param: { platform: '2' } }).then(res => {
        this.tbLoading = false
        if (res.errorCode === '000000') {
          this.$message.success(this.$t('message.tbcg'))
          this.getList(1)
        }
      }).catch(() => {
        this.tbLoading = false
      })
    },
    toEdit (items) {
      this.dialogTableVisible = true
      this.getMeals(items)
      this.getVateList(items)

      //   this.newDevice.mealsId = items.mealsId
      console.log(items, '--------------------')
      this.newDevice = { ...items }
      setTimeout(() => {
        this.$refs.newDevice.clearValidate()
      }, 300)
    },
    getList (page) {
      const param = { ...this.filters, platform: '2', venueId: sessionStorage.getItem('venueId') }
      const { pagination } = this
      if (page) {
        this.pagination.page = page
        pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      groupBuyConfigList({
        pagination,
        param
      }, sessionStorage.getItem('venueId')).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.totalCount = res.totalCount
          this.list = res.recordList
          this.$refs.table.doLayout()
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    clear () {
      this.filters = {}
      this.getList(1)
    },
    search () {
      this.getList(1)
    },
    cancel () {
      this.dialogTableVisible = false
    },
    save () {
      const that = this
      this.$refs.newDevice.validate((valid) => {
        if (valid) {
          that.saveLoading = true
          const param = { ...that.newDevice }
          param.venueId = sessionStorage.getItem('venueId')
          //   param.proType = '04'
          param.dealId = param.id
          groupBuyConfigEdit({ param }, sessionStorage.getItem('venueId')).then(res => {
            that.saveLoading = false
            if (res.errorCode === '000000') {
              that.dialogTableVisible = false
              that.$message.success(this.$t('message.editcg'))
              that.getList(1)
            }
          }).catch(err => {
            that.saveLoading = false
            console.log(err)
          })
        }
      })
    }
  }
}
</script>
